
//当表单发生提交行为的时候
$('#userform').on('submit',function(){
    //获取到用户在表单中输入的内容并将内容格式化成参数字符串
   var formData = $(this).serialize();
   $.ajax({
       type:'post',
       url:'/users',
       data:formData,
       success:function(){
           //刷新页面
        location.reload();
       },
       error:function(){
        alert('添加用户失败')
       }
   })
    //阻止表单的默认提交行为
    return false;
    
})

//当用户选择文件的时候

$('#modifyBox').on('change','#avatar', function(){
     //用户选择到的文件
   //this.files[0]
   var formData = new FormData();
   formData.append('avatar',this.files[0]);

   $.ajax({
       type:'post',
       url:'/upload',
       data:formData,
       //告诉$.ajax不要解析请求参数
       processData:false,
       //告诉$.ajax不要设置请求参数的类型
       contentType:false,
       success:function (response) {
           //实现头像预览功能
           $('#preview').attr('src',response[0].avatar);
          //为隐藏域添加值
           $('#hiddenavatar').val(response[0].avatar);
       }
   })
})


//向服务器端发送ajax请求
$.ajax({
    type:'get',
    url:'/users',
    success:function(response) {
        // console.log(response);
        //使用模板引擎将数据和HTML字符串进行拼接
         var html = template('tpl',{data:response});
         //将拼接好的字符串显示在页面中
         $('#userBox').html(html);
    }
})


//通过事件委托的方式为编辑按钮添加点击事件
$('#userBox').on('click','.edit',function(){
        //获取被点击永华的id值
        var id = $(this).attr('data-id');
       //根据id获取用户的详细信息
       $.ajax({
           type:'get',
           url:'/users/'+id,
           success:function(response) {
         var html = template('modifyTpl',response);
         $('#modifyBox').html(html)
           }
       })
})

//为修改表单添加表单提交事件
$('#modifyBox').on('submit','#modifyform',function () {
    //获取用户在表单的输入内容
    var formData =$(this).serialize()
    //获取要修改的那个用户的id值
    var id = $(this).attr('data-id');
    //发送ajax请求 修改用户信息
    $.ajax({
        type:'put',
        url:'/users/'+ id ,
        data:formData,
        success:function (response) {
            // console.log(response)
            location.reload()
        }
    })
    //阻止表单默认提交
    return false
})

$('#userBox').on('click','.delete',function () {
    //如果管理员确认删除用户
    if(confirm('是否确认删除用户')){
        var id = $(this).attr('data-id')
        //像服务器端发送请求 删除用户
        $.ajax({
            type:'delete',
            url:' /users/'+id,
            success:function() {
                //删除成功 直接刷新页面
                location.reload()
            }
        })
    }
})